<template>
  <div class="login_box">
    <div class="login_wrapper">
      <div class="profile_wraps">
        <img src="../../assets/logo.png" alt="" />
      </div>

      <div class="from_box">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input type="text" v-model="ruleForm.username">
              <i slot="prefix" class="el-input__icon el-icon-s-custom"></i
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
            >
              <i slot="prefix" class="el-input__icon el-icon-info"></i
            ></el-input>
          </el-form-item>

          <el-form-item class="btn_wrap">
            <el-button type="primary" @click="submitForm('ruleForm')"
              >提交</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
      <div>
        <el-form :model="form1"  :rules="rule">
          <el-form-item label="菜单" prop="menuName">
              <el-input v-model="form1.menuName" @focus="ishow = true"></el-input>
              <div v-show="ishow">
                <div v-for="item in 6" :key="item" @click="setData(item)">{{item+'hello wordle'}}</div>
              </div>
          </el-form-item>
          <el-form-item label="菜单" prop="menuid">
              <el-input v-model="form1.menuid"></el-input>
          </el-form-item>
        </el-form>
      </div>
  </div>
</template>
<script>
export default {
  data() {
    var validatename = (rule, value, callback) => {
      if (!value) {
        callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };

    return {
      ishow:false,
      ruleForm: {
        password: "123456",
        username: "admin",
      },
      form1:{},
      rules: {
        password: [{ validator: validatePass, trigger: "blur" }],
        username: [{ validator: validatename, trigger: "blur" }],
      },
      rule:{
        menuName:[{required:true,trigger:['blur','change']}],
        menuid:[{required:true,trigger:['blur','change']}],
      }
    };
  },

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.post("login", this.ruleForm).then((res) => {
            let { data, meta } = res;

            if (meta.status == 200) {
              localStorage.setItem("admin", JSON.stringify(data));
              sessionStorage.setItem("token", data.token);
              this.$message.success("登录成功");
              this.$router.push("/home");
            } else {
              this.$message.error("登录失败");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    setData(item){
     
      this.$set(this.form1,'menuName',item)
      this.ishow = false
    }
  },
  watch:{
    'form1.menuName':{
      handler(newVal){
        this.form1.menuid = newVal
      }
    }
  }
};
</script>
<style scoped lang="less">
.login_box {
  position: relative;
  height: 100%;
  background-color: cornflowerblue;
  .login_wrapper {
    position: absolute;
    width: 500px;
    padding-right: 30px;
    background-color: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .profile_wraps {
      position: absolute;
      width: 130px;
      height: 130px;
      padding: 10px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      left: 50%;
      box-shadow: 0 0 5px 0 #eee;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }
  }
  .from_box {
    margin-top: 75px;
    .btn_wrap {
      display: flex;
      flex-direction: row-reverse;
    }
  }
}
.item-box{
  height: 100px;
  background-color: saddlebrown;
}
.box-wrapper{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
// @media (min-width: 768px) and (max-width: 979px) {
//   .box-wrapper{
//     justify-content: space-between;
//   }
//  }
// @media (max-width: 767px) { 
//   .box-wrapper{
//     justify-content: start;
//   }
//  }
</style>